<script setup lang="ts">
import { jobLogType } from '@/types/global';


const props = withDefaults(
    defineProps<{
        page?: { currentPage: number, pageSize: number },
        pageSizeOpt: number[],
        paginationDisabled: boolean,
        dataTotal: number,
        tableHead: {
            colText: string;
            key: string;
        }[],
        tableData: jobLogType[],
    }>(), {
    pageSizeOpt: () => [5, 10, 25, 50, 100, 500],
    paginationDisabled: () => false
}
)


const emit = defineEmits(['update:page'])

const handleCurrentChange = (currentPage: number) => {
    emit('update:page', { ...props.page, currentPage })
}

const handleSizeChange = (pageSize: number) => {
    emit('update:page', { ...props.page, pageSize })
}



</script>





<template>
    <el-row justify="space-between">
        <slot name="leftHeader"></slot>
        <!-- page 属性不提供就不启用分页 -->
        <el-pagination
            v-if="page"
            v-model:currentPage="page.currentPage"
            :page-sizes="pageSizeOpt"
            :page-size="page.pageSize"
            :disabled="paginationDisabled"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
    </el-row>

    <el-table border :data="tableData" style="width: 100%">
        <template v-for="(headItem) in tableHead" :key="headItem.key">
            <el-table-column align="center" :prop="headItem.key" :label="headItem.colText">
                <template #default="{ row, column, $index }">
                    <slot :name="headItem.key" :row="row"></slot>
                </template>
            </el-table-column>
        </template>
    </el-table>
</template>



<style>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-lighter);
}
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-lighter);
}
</style>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
    margin-left: auto;
}
.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>